<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>近场游戏--中国象棋</title>
    <script>
      (function() {
          var scale = 1.0;
          var ratio = 1;
          var userAgent = navigator.userAgent;
          var match = userAgent.match(/Android/);
          var iosLt5 = navigator.userAgent.match(/iphone4|iphone5/i);
          if (!!match || !!iosLt5) {
              document.write('<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">');
              document.documentElement.style.fontSize = "50px";
          } else {
              if (window.devicePixelRatio >= 2) {
                  scale *= 0.5;
                  ratio *= 2;
                  var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
                  document.write(text);
                  document.documentElement.style.fontSize = 50 * ratio + "px";
              }
          }
      })();
    </script>

    <style>
      *{
          margin: 0px;
          padding: 0px;
          border: 0px ;
      }
      .textshadow{
          text-shadow: 5px 5px 5px #FF0000;
      }
      .startscreen{
        position:absolute;
        margin-top:30%;
        margin-left:30%;
        display: none;
      }
      .mainscreen{
        position:absolute;
        display: none;
      }
      .backlevel{
        position:absolute;
        width:100%;
        z-index: -100;
      }
      .playcanvas{
        position: relative;
        height: 70%;
      }
       .again{
        position:absolute;
        width:100%;
        height :100%;
        display : none;
        background-color :#FFFFFF;
      }
      #successInfo{
        position:relative;
        top: 20%;
        text-indent: 100px;
        height : 30% ;
      }
      #againOper{
        position:relative;
        left:50px;
        height : 60% ;
      }
    </style>
  </head>
  <body>
    <div id="gamestartscreen" class="startscreen">
      <img src="../img/settings/play.png" id="start" />
      <img src="../img/settings/return.png" id="quit" />
    </div>
    <div id="mainscreen" class="mainscreen">
      <div id="backLevel" class="backlevel">
        <img src="../img/checkerpng/checkerboard.png" id="backImg" />
      </div>
      <div class="backlevel">
        <canvas id="table" height="800" width="600" >
        </canvas>
      </div>
      <div class="playcanvas">
        <canvas id="piecestable" height="800" width="600" >
        </canvas>
      </div>
      <div id="info"></div>
    </div>
    <div id="again" class="again">
      <div id="successInfo"></div>
      <div id="againOper">
        <img src="../img/settings/play.png" id="playAgain">
        <img src="../img/settings/return.png" id="close">
      </div>
    </div>

    <script type="text/javascript" src="../js/mind.js"></script>
    <script type="text/javascript" src="../js/layout.js"></script>
    <script type="text/javascript" src="../js/draw.js"></script>
    <script type="text/javascript" src="../js/plugin/dom.js"></script>
    <!-- <script type="text/javascript" src="../js/plugin/lc.debug.js"></script> -->
    <script type="text/javascript" src="../js/plugin/lc.debug.js"></script>
    <script type="text/javascript" src="../js/ext/table.js"></script>
    <script type="text/javascript" src="../js/ext/button.js"></script>
    <script type="text/javascript" src="../js/config.js"></script>
    <script type="text/javascript" src="../js/chinesschess.js"></script>
    <script type="text/javascript" src="../js/util.js"></script>
    <script type="text/javascript" src="../js/judge.js"></script>
    <script type="text/javascript" src="../js/app.js"></script>
  </body>
</html>
